<template>
  <div id="app">
    <el-container class="app_container">
      <el-header style="text-align: right; font-size: 12px">
        <nav-menu :curTeaName = 'curTeaName' @successLogin="changeIsLogin"></nav-menu>
      </el-header>

      <el-container class="main_container">
        <aside-menu v-show="isLogin"></aside-menu>
        <el-main class="app_main" v-show="isLogin">

          <router-view></router-view>
        </el-main>
        <el-main class='no-login' style="display: flex;" v-if="!isLogin">
            <el-image
            style="width:300px;height:300px"
            :src="url"
            fit="fill"></el-image>
        </el-main>
      </el-container>



    </el-container>
  </div>
</template>

<script>
import NavMenu from "./components/NavMenu.vue";
import AsideMenu from './components/AsideMenu.vue'
import { Storage } from "@/storage";

export default {
  name: "App",
  components: {
    NavMenu,AsideMenu
  },
  data() {
    return {
      isLogin: false,
      curTeaName:"",
      url:require('../public/img/no-login.png')
    }
  },
  methods:{
    checkLoginStatus() {
        let token = Storage.get("nothing-token")
        let storage_teaInfo = Storage.get("tea")
        if(token == undefined || token == null || token == '') {
          this.$message({
                        showClose: true,
                        message: '当前登录状态已过期，请重新登录',
                        type: 'error'
          });
          this.curTeaName = ''
          this.isLogin = false
        }else {
          this.curTeaName = storage_teaInfo.teaName
          this.isLogin = true
      }
    },
    changeIsLogin(isLogin) {
      this.isLogin = isLogin
    }
  },
  mounted() {
    this.checkLoginStatus()
  }
}
</script>

<style>
body {
  padding: 0%;
  margin: 0%;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  /* margin-top: 60px; */
}
.app_container {
  min-height: 1000px;
  width: 100%;
}

.main_container {
  margin-top: 2%;
  /* padding-left: 2%; */
  box-shadow: 0 2px 12px   0px rgb(0 0 0 / 15%);
  /* border-radius: 35px; */
  /* border-top-left-radius: 35px;
  border-top-right-radius: 35px; */
  overflow: hidden;

}

.app_main {
  margin: 1%;
}

.no-login {
  justify-content: center;
  align-items: center;
}
</style>
